<template>
  <div>
    <!-- 头部 -->
    <div>
      <div class="top-1">
        <div>{{getshome.name}}</div>
        <div class="pinxing"><van-rate v-model="value" :count="5" color="orange" />
        
          <span style="margin:0px 20px">(661)</span> 月售 <span>{{getshome.sellCount}}</span> 单
        </div>
        <!-- 定位的爱心 -->
        <div class="love">
          <van-rate v-model="lvalue" icon="like" void-icon="like-o" :count="1" :size=36  />
          <div>已收藏</div>
        </div>
      </div>
      
      <div class="top-2">
        <div>
          <div>起送价</div>
          <div> <span style="font-size:40px">{{getshome.minPrice}}</span> 元</div>
        </div>
        <div class="border-sty"></div>
        <div>
          <div>商家配送</div>
          <div><span style="font-size:40px">{{getshome.deliveryPrice}} </span> 元</div>
        </div>
        <div class="border-sty"></div>
        <div>
          <div>平均配送时间</div>
          <div> <span style="font-size:40px">{{getshome.deliveryTime}}</span> 元</div>
        </div>
      </div>
    </div>
      <div class="tong-sty"></div>
    <div>
      <h2>公告与活动</h2>
      <van-cell color:red :value="getshome.bulletin" />

      <div  v-for="(item, i) in getshome.supports" :key="i">
        <!-- 这是线 -->
        <van-cell-group >
          <van-cell>
            <!-- 这是字体图标 -->
            <div class="xuanran">
              <img :src="imgurl[i]" alt="图片加载失败" />{{ item }}
            </div>
          </van-cell>
        </van-cell-group>
      </div>
<div class="tong-sty"></div>
<!-- 商家实景 -->

  <div class="parshop">
    
      <h3 style="margin-top:15px;">商家实景</h3>
    <div class="shop-img">
      <img v-for="(item,i) in getshome.pics" :key="i" :src="item" alt="">
    </div>
  </div>
  <div class="tong-sty"></div>

  <!-- 商家信息 -->
  <div class="shop-xinxi">
    <h3>商家信息</h3>
  </div>
      <van-cell-group>
        <van-cell value="内容" />
      </van-cell-group>
        
      <van-cell-group>
        <van-cell value="n内容" />
      </van-cell-group>

      <van-cell-group>
        <van-cell>
      <div class="fiil-time">
        营业时间：
      {{getshome.date[0].substring(10)}}-{{getshome.date[1].substring(10)}}
      </div>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      imgurl: [
        require("@/assets/img/decrease.png"),
        require("@/assets/img/discount.png"),
        require("@/assets/img/discount.png"),
        require("@/assets/img/special.png"),
        require("@/assets/img/special.png"),
      ],
      lvalue:1,
      value:4,
    };
  },
  props: ["getshome"],
  created() {
    
    console.log(this.getshome.date);
   
    
  },
};
</script>

<style lang="less" scoped>
h2 {
  margin: 20px 0px 0px 20px;
  font-weight: 600;
}
.top-1{
  position: relative;
  padding: 24px 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
}
.top-2{
  display: flex;
  justify-content: space-around;
  padding: 20px;
  box-sizing: border-box;
  div{
    div{
      padding-top: 4px;
      box-sizing: border-box;
    }
  }

}
//公用的中间线段
.border-sty{
  
  height:70px;
  border: 1px dashed rgba(79, 95, 110, 0.2);
}
.pinxing{
  display: flex;
  letter-spacing: 1px;
  margin-top: 10px;
}
.love{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  div{
    font-size: 14px;
  }
}
.tong-sty{
  height: 20px;
  border-top:1px solid #cccccc ;
  border-bottom:1px solid #cccccc ;
  background: #eeeeee;
}
.xuanran{
  display: flex;
  vertical-align: middle;
  align-items: center;
  img{
    height: 20px;
    width: 20px;
    margin-right:6px ;
  }
}
.shop-img{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px 0px;
  box-sizing: border-box;

  img{
    height: 100%;
    width: 30%;
    padding-top:10px ;
  }
}
.parshop {
  padding: 0px 20px;
}
   h3{
    
    box-sizing: border-box;
    font-weight: 600;
    font-size: 20px;
  }
  .shop-xinxi{
    padding: 20px;
    box-sizing: border-box;
  }
  .fiil-time{
    font-size: 20px;
  }
</style>